<template>
	<view class="wrap-receive-timer flex column align-center just-center">
		<view class="redBag-bg" v-if="redType == 0" @click.stop="onReceive">
			<image class="img" :src="$staticImagePath('article/receive_redBag.png')" />

			<view class="time f-28" v-if="countTime > 0">{{ countTime }}s</view>
		</view>

		<view class="coupon-bg" v-else-if="redType == 1" @click.stop="onReceive">
			<image class="img" :src="$staticImagePath('article/receive_coupon.png')" />

			<view class="time f-28" v-if="countTime > 0">{{ countTime }}s</view>
		</view>

		<view class="progress-bg flex align-center">
			<view class="current" :style="'width:' + (countTime * 100.0) / downTime + '%;'"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 类型
			 */
			redType: {
				type: String,
				default: "",
			},
		},
		data() {
			return {
				downTime: 10,
				countTime: 10,
				countTimer: null,
			};
		},
		mounted() {
			this.onStartTimer();
		},
		methods: {
			/**
			 * 结束倒计时
			 */
			onStopTimer() {
				clearInterval(this.countTimer);
			},
			/**
			 * 开始倒计时
			 */
			onStartTimer() {
				this.countTime = this.downTime;
				this.countTimer = setInterval(() => {
					this.countTime--;
					if (this.countTime === 0) {
						this.onStopTimer();
						this.$emit("onTimerEnd");
					}
				}, 1000);
			},
			/**
			 * 领取红包
			 */
			onReceive() {
				if (this.countTime > 0) {
					return;
				}

				this.$emit("onTimerEnd");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-receive-timer {
		position: fixed;
		right: 30rpx;
		bottom: 300rpx;
		z-index: 99;
		width: fit-content;
		height: fit-content;
		gap: 10rpx;

		.redBag-bg {
			width: 160rpx;
			height: 134rpx;
			position: relative;
			z-index: 100;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
			}

			.time {
				position: absolute;
				bottom: 18rpx;
				left: 50%;
				transform: translateX(-60%);
				color: #fff4ce;
				z-index: 101;
			}
		}

		.coupon-bg {
			width: 143rpx;
			height: 130rpx;
			position: relative;
			z-index: 100;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
			}

			.time {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #865b2a;
				z-index: 101;
			}
		}

		.progress-bg {
			width: 100rpx;
			height: 10rpx;
			border-radius: 5rpx;
			overflow: hidden;
			background-color: #fff4ce;

			.current {
				height: 10rpx;
				border-radius: 5rpx;
				overflow: hidden;
				background: linear-gradient(to right, #f49355, #dd551b);
			}
		}
	}
</style>
